<template>
  <div>
     <div>
        <!-- v-for 可以用来遍历数组和对象，渲染页面结构 -->
        <!-- v-for写法 v-for="item in 数组"-->
        <!-- 子元素： <li>{{item}}</li> -->
        <!-- v-for写法 v-for="(item,index) in 数组"-->
        <!-- eslint-disable-next-line -->
        <!-- <ul v-for="(item,index) in hobby">
            <li>{{index + item}}</li>
        </ul> -->

        <!-- v-for 遍历对象 (value,key) in 对象 -->
         <!-- eslint-disable-next-line -->
         <!-- <ul v-for="(item,key) in obj">
            <li>{{key+':'+item}}</li>
        </ul> -->


        <!-- v-for 遍历数字  了解即可-->
         <!-- eslint-disable-next-line -->
         <!-- <ul v-for="item in 5">
            <li>我是第{{item}}个盒子</li>
        </ul> -->


        
        <ul v-for="item in renderData.data" :key="item">
           <li>{{"姓名：" + item.uname + ' 成绩：'+item.score }}</li> 
        </ul>
     </div>
   </div>
</template>
 
<script>
export default {

  data() {
    return {
        hobby:['唱','跳','rap'],
        obj:{
            uname:'kunkun',
            age:'29',
            hobby:'敲代码'
        },

        renderData: {
            message:'获取数据成功',
            data:[
                {
                    uname:'陈志豪',
                    score:'20'
                },
                {
                    uname:'沈德亮',
                    score:'95'
                },{
                    uname:'侯涵翔',
                    score:'60'
                },{
                    uname:'石益涛',
                    score:'99'
                },{
                    uname:'魏芳芳',
                    score:'150'
                },{
                    uname:'郑新新',
                    score:'150'
                },
            ]
        }
    };
  },

  methods: {}
};
</script>

<style scoped>
     
</style>